<template>
  <div class="set">


        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" status-icon>

          <!-- 网站名称 -->
          <el-form-item label="标题" prop="title" 

          >
            <el-input v-model="ruleForm.title" />
          </el-form-item>

          <!-- 网站url -->
          <el-form-item label="关键字" prop="keywords" 

          >
            <el-input v-model="ruleForm.keywords" />
          </el-form-item>

          <!-- 关键字 -->
          <el-form-item label="作者" prop="author" 

          >
            <el-input v-model="ruleForm.author" />
          </el-form-item>

          <!-- 简介 -->
          <el-form-item label="介绍" prop="desc" 

          >

                 <el-input  type="textarea" />
            <!-- <el-input v-model="ruleForm.desc" />a -->


          </el-form-item>









          <!-- 微信小程序图片 -->
          <el-form-item label="微信小程序图片：" :rules="[
            { required: true, message: '请上传微信小程序图片' },
            { type: 'string', message: '请上传微信小程序图片' },
          ]">
            <el-upload class="avatar-uploader" action="http://121.42.230.80/api/mini/upload" :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="ruleForm.thumb" :src="ruleForm.thumb" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>



                <el-form-item label="正文" prop="content" :rules="[
   
          ]">

                 <el-input v-model="ruleForm.content" type="textarea" />
      


          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>

        </el-form>







  </div>
</template>

<script setup lang='ts'>

import {newsadd} from "../../api/news"
import {  ref } from 'vue'
import type {  UploadProps } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'





// 上传图片
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  ruleForm.value.thumb = URL.createObjectURL(uploadFile.raw!) //临时路径
  console.log(response); //真实路径
  ruleForm.value.thumb = response.data //赋值
}

// 表单数据
let ruleForm: any = ref([

])


// 提交
let submit = async () => {
  console.log(ruleForm.value);
  
  let res: any = await newsadd({
 
   ruleForm
  })
  console.log(res);

  if (res.code === '00000') {
    ElNotification({
      title: '成功',
      message: '添加成功',
      type: 'success',
    })

    addAmend.value = true
 
  } else {
    ElNotification({
      title: '失败',
      message: '添加失败',
      type: 'error',
    })
  }

}







let addAmend = ref(true)











</script>

<style scoped lang='less'>


</style>